<template>
  <baidu-map
  v-if="init"
    class="map"
    :center="mapdata.center"
    :zoom="15"
    @ready="handler"
    :scroll-wheel-zoom="true"
    mapType="BMAP_NORMAL_MAP"
    :style="{'height':height}"
  >
    <div v-for="(it,index) in mapdata.marker_Data" :key="index">
      <bm-marker
        :position="it.position"
        :dragging="false"
        @click="infoWindowOpen(it,index)"
        :icon="it.id==report_id?{url: 'http://www.kouhaobang.com/images/p@3.png', size: {width: 60, height: 60}}:it.icon?{url: 'http://www.kouhaobang.com/images/p@1.png', size: {width: 60, height: 60}}:{url: 'http://www.kouhaobang.com/images/p@2.png', size: {width: 30, height: 30}}"
        :animation="it.id==report_id?'BMAP_ANIMATION_BOUNCE':''"
      >
        <bm-info-window
          :show="it.id===cur_id"
          @close="infoWindowClose(it,index)"
          @open="infoWindowOpen(it,index)"
          :title="it.title"
        >
          <div v-html="it.msg"></div>
        </bm-info-window>
      </bm-marker>
         <bm-label v-if="!it.icon" :content="it.title" :position="it.position" :labelStyle="{border:'1px solid #13227a',color: '#13227a', fontSize : '12px'}" :title="it.title"/>
    </div>
  </baidu-map>
</template>
>
<script>
import mapdata from "@/utils/mapdata.js";
export default {
  props: ["height", "type",'from_report_id'],
  data() {
    return {
      init:true,
      cur_id: 0,
      mapdata: {},
      report_id:0
    };
  },
  watch:{
      type(val) {
        this.init = false;
        setTimeout(()=>{
          this.init = true;
          this.getMapData(val);
        },500)
      },
      from_report_id(val) {
        this.report_id = val;
        console.log(this.report_id)
      }
  },
  created() {
    this.getMapData("A");
  },
  methods: {
    handler({Bmap,map}){
      console.log(Bmap,map)
    },
    // 获取地图数据
    getMapData(t) {
      if(t==="A"){
        this.cur_id = 3;
      }else if(t==="B"){
        this.cur_id = 11;
      }else if(t==="C"){
        this.cur_id = 31;
      }
      this.mapdata = mapdata[t];
      console.log(this.mapdata)
    },
    infoWindowClose(it, index) {
      this.cur_id = 0;
    },
    infoWindowOpen(it, index) {
      this.cur_id = it.id;
      console.log(this.cur_id)
    }
  }
};
</script>
<style >
.anchorBL{

  display:none;

}
</style>
